import React, { useMemo, useState } from 'react'
import styles from './index.module.less'
import cm from 'classnames'
import Sker from '@/utils/sker'

/**
interface Props {
  defaultChecked?: boolean
  alignSpace?: number //文案距离选择框的的距离
  disabled?: boolean
  onChange?: (data: { checked: boolean; value: ValueType }) => void
  value: ValueType
  children?:React.ReactNode
  name?: string
} 
*/
const Index = (props) => {
  const { defaultChecked, value, disabled = false, alignSpace = 6, name, children, className, bg = 'blue' } = props
  const [checked, setChecked] = useState(!!defaultChecked)
  const change = () => {
    const currentValue = !checked
    const data = { checked: currentValue, value }
    setChecked(currentValue)
    console.log(name, 11)
    name && Sker.dispatch(name, { name: '', data })
    props?.onChange?.(data)
  }

  const styleActive = useMemo(() => {
    if (checked) {
      return {
        background: bg,
        borderColor: bg,
      }
    }
    return {}
  }, [checked, bg])

  return (
    <label className={cm(styles.checkbox_container, { [styles.containerDisabled]: disabled }, className)}>
      <div
        className={cm(styles.checkbox, { [styles.active]: checked }, { [styles.disabled]: disabled })}
        style={styleActive}
      ></div>
      <input
        disabled={disabled}
        name={name}
        type="checkbox"
        className="w-0 h-0 overflow-hidden"
        onChange={change}
        checked={checked}
      />
      {children && (
        <div className={styles.checkboxLabel} style={{ marginLeft: alignSpace }}>
          {children}
        </div>
      )}
    </label>
  )
}

export default Index
